<template>
  <view class="pilot-apply-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left" @click="navigateBack">
        <text class="icon-arrow-left">←</text>
      </view>
      <view class="navbar-title">成为认证飞手</view>
      <view class="navbar-right" @click="showHelp">
        <text class="icon-help">?</text>
      </view>
    </view>

    <!-- 进度指示器 -->
    <view class="progress-container">
      <view class="progress-track"></view>
      <view 
        class="progress-fill" 
        :style="{ width: (currentStep / (steps.length - 1)) * 100 + '%' }"
      ></view>
      <view class="progress-steps">
        <view 
          v-for="(step, index) in steps" 
          :key="index"
          class="progress-step"
          :class="{ 
            completed: currentStep > index,
            active: currentStep === index 
          }"
        >
          <view class="step-icon">
            <text v-if="currentStep > index" class="icon-check">✓</text>
            <text v-else>{{ index + 1 }}</text>
          </view>
          <text class="step-text">{{ step }}</text>
        </view>
      </view>
    </view>

    <!-- 表单容器 -->
    <view class="form-container">
      <!-- 步骤内容区域 -->
      <view class="form-steps">
        <!-- 步骤1：基本信息 -->
        <view 
          class="form-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 0 ? 1 : 0
          }"
        >
          <view class="form-title">个人基本信息</view>
          <view class="form-fields">
            <view class="form-field">
              <view class="field-label">姓名</view>
              <view class="field-control">
                <input 
                  v-model="formData.name" 
                  placeholder="请输入您的真实姓名"
                  maxlength="10"
                  class="text-input"
                ></input>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">手机号码</view>
              <view class="field-control">
                <input 
                  v-model="formData.phone" 
                  placeholder="请输入手机号码"
                  type="number"
                  maxlength="11"
                  class="text-input"
                ></input>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">所在城市</view>
              <view class="field-control">
                <view class="select-input" @click="showCityPicker = true">
                  <text v-if="formData.city">{{ formData.city }}</text>
                  <text v-else class="placeholder">请选择所在城市</text>
                  <text class="select-arrow">▼</text>
                </view>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">身份证号</view>
              <view class="field-control">
                <input 
                  v-model="formData.idCard" 
                  placeholder="请输入身份证号"
                  maxlength="18"
                  class="text-input"
                ></input>
                <text class="field-hint">用于身份验证，我们将严格保密</text>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">上传头像</view>
              <view class="field-control">
                <view class="upload-container">
                  <view class="upload-preview" v-if="formData.avatar">
                    <image :src="formData.avatar" mode="cover"></image>
                    <view class="upload-remove" @click="removeAvatar">
                      <text>×</text>
                    </view>
                  </view>
                  <view 
                    class="upload-add" 
                    v-else
                    @click="chooseAvatar"
                  >
                    <text class="upload-plus">+</text>
                    <text class="upload-text">上传头像</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 步骤2：资质信息 -->
        <view 
          class="form-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 1 ? 1 : 0
          }"
        >
          <view class="form-title">无人机操作资质</view>
          <view class="form-fields">
            <view class="form-field">
              <view class="field-label">操作证书类型</view>
              <view class="field-control">
                <view class="radio-group">
                  <label 
                    class="radio-item" 
                    :class="{ checked: formData.certType === type.value }"
                    v-for="type in certTypes" 
                    :key="type.value"
                    @click="formData.certType = type.value"
                  >
                    <view class="radio-circle"></view>
                    <text class="radio-text">{{ type.label }}</text>
                  </label>
                </view>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">证书编号</view>
              <view class="field-control">
                <input 
                  v-model="formData.certNumber" 
                  placeholder="请输入证书编号"
                  class="text-input"
                ></input>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">持证时长</view>
              <view class="field-control">
                <view class="radio-group">
                  <label 
                    class="radio-item" 
                    :class="{ checked: formData.certYears === year.value }"
                    v-for="year in certYearOptions" 
                    :key="year.value"
                    @click="formData.certYears = year.value"
                  >
                    <view class="radio-circle"></view>
                    <text class="radio-text">{{ year.label }}</text>
                  </label>
                </view>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">飞行经验</view>
              <view class="field-control">
                <textarea 
                  v-model="formData.experience" 
                  placeholder="请描述您的无人机飞行经验、擅长领域等"
                  maxlength="500"
                  class="textarea-input"
                  rows="4"
                ></textarea>
                <text class="field-hint">{{ formData.experience.length }}/500 字符</text>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">证书照片</view>
              <view class="field-control">
                <view class="upload-container">
                  <view 
                    class="upload-preview" 
                    v-if="formData.certImages.length > 0"
                  >
                    <image 
                      :src="formData.certImages[0]" 
                      mode="cover"
                    ></image>
                    <view class="upload-remove" @click="removeCertImage(0)">
                      <text>×</text>
                    </view>
                  </view>
                  <view 
                    class="upload-add" 
                    v-else
                    @click="chooseCertImage"
                  >
                    <text class="upload-plus">+</text>
                    <text class="upload-text">上传证书照片</text>
                  </view>
                </view>
                <text class="field-hint">请上传清晰的证书正反面照片</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 步骤3：设备信息 -->
        <view 
          class="form-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 2 ? 1 : 0
          }"
        >
          <view class="form-title">设备信息</view>
          <view class="form-fields">
            <view class="form-field">
              <view class="field-label">拥有设备</view>
              <view class="field-control">
                <view class="checkbox-group">
                  <view class="checkbox-grid">
                    <label 
                      v-for="device in deviceTypes" 
                      :key="device.value"
                      class="checkbox-item"
                      :class="{ checked: formData.devices.includes(device.value) }"
                      @click="toggleDevice(device.value)"
                    >
                      <view class="checkbox-icon">
                        <text v-if="formData.devices.includes(device.value)">✓</text>
                      </view>
                      <text class="checkbox-text">{{ device.label }}</text>
                    </label>
                  </view>
                </view>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">其他设备</view>
              <view class="field-control">
                <input 
                  v-model="formData.otherDevices" 
                  placeholder="请填写其他拥有的设备型号（可选）"
                  class="text-input"
                ></input>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">服务范围</view>
              <view class="field-control">
                <view class="radio-group">
                  <label 
                    class="radio-item" 
                    :class="{ checked: formData.serviceRange === range.value }"
                    v-for="range in serviceRangeOptions" 
                    :key="range.value"
                    @click="formData.serviceRange = range.value"
                  >
                    <view class="radio-circle"></view>
                    <text class="radio-text">{{ range.label }}</text>
                  </label>
                </view>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">服务类型</view>
              <view class="field-control">
                <view class="checkbox-group">
                  <view class="checkbox-grid">
                    <label 
                      v-for="service in serviceTypes" 
                      :key="service.value"
                      class="checkbox-item"
                      :class="{ checked: formData.services.includes(service.value) }"
                      @click="toggleService(service.value)"
                    >
                      <view class="checkbox-icon">
                        <text v-if="formData.services.includes(service.value)">✓</text>
                      </view>
                      <text class="checkbox-text">{{ service.label }}</text>
                    </label>
                  </view>
                </view>
              </view>
            </view>
            
            <view class="form-field">
              <view class="field-label">设备照片</view>
              <view class="field-control">
                <view class="upload-container multiple">
                  <view 
                    class="upload-preview" 
                    v-for="(img, index) in formData.deviceImages" 
                    :key="index"
                  >
                    <image :src="img" mode="cover"></image>
                    <view class="upload-remove" @click="removeDeviceImage(index)">
                      <text>×</text>
                    </view>
                  </view>
                  <view 
                    class="upload-add" 
                    v-if="formData.deviceImages.length < 3"
                    @click="chooseDeviceImages"
                  >
                    <text class="upload-plus">+</text>
                    <text class="upload-text">上传设备照片</text>
                  </view>
                </view>
                <text class="field-hint">最多上传3张设备照片，展示您的设备情况</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 提交成功 -->
        <view 
          class="form-step success-step" 
          :style="{ 
            transform: `translateX(-${currentStep * 100}%)`,
            opacity: currentStep === 3 ? 1 : 0
          }"
        >
          <view class="success-icon">✓</view>
          <text class="success-title">申请提交成功！</text>
          <text class="success-desc">您的飞手认证申请已受理，申请编号：{{ applyNumber }}</text>
          <text class="success-info">我们将在3个工作日内完成审核，结果将通过短信通知您</text>
          <view class="success-buttons">
            <button 
              class="success-btn primary"
              @click="navigateToHall"
            >
              返回飞手大厅
            </button>
            <button 
              class="success-btn secondary"
              @click="navigateToHome"
            >
              返回首页
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="form-actions" v-if="currentStep < 3">
      <button 
        v-if="currentStep > 0"
        class="action-btn prev-btn"
        @click="prevStep"
      >
        上一步
      </button>
      <button 
        class="action-btn next-btn"
        @click="nextStep"
      >
        {{ currentStep === 2 ? '提交申请' : '下一步' }}
      </button>
    </view>

    <!-- 城市选择弹窗 -->
    <view class="modal-overlay" v-if="showCityPicker" @click="showCityPicker = false">
      <view class="modal-dialog city-picker" @click.stop>
        <view class="modal-title">选择所在城市</view>
        <view class="city-picker-content">
          <picker 
            mode="multiSelector"
            :range="cityList"
            @change="onCityChange"
            @columnchange="onCityColumnChange"
          >
            <view class="picker-view">
              {{ formData.city || '请选择城市' }}
            </view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 帮助提示弹窗 -->
    <view class="modal-overlay" v-if="showHelpModal" @click="showHelpModal = false">
      <view class="modal-dialog help-modal" @click.stop>
        <view class="modal-title">飞手认证说明</view>
        <view class="help-content">
          <view class="help-item">
            <view class="help-item-title">认证条件</view>
            <view class="help-item-content">
              <text>1. 年满18周岁，身体健康</text>
              <text>2. 持有有效的无人机操作证书</text>
              <text>3. 拥有至少一台符合要求的无人机设备</text>
              <text>4. 无不良飞行记录</text>
            </view>
          </view>
          <view class="help-item">
            <view class="help-item-title">审核流程</view>
            <view class="help-item-content">
              <text>1. 提交申请后，工作人员将在3个工作日内审核</text>
              <text>2. 审核通过后，将通过短信发送认证结果</text>
              <text>3. 认证成功后即可在平台接单</text>
            </view>
          </view>
          <view class="help-item">
            <view class="help-item-title">注意事项</view>
            <view class="help-item-content">
              <text>1. 请确保提交的信息真实有效</text>
              <text>2. 上传的照片需清晰可见，否则可能导致审核失败</text>
              <text>3. 如有疑问，请联系客服：400-123-4567</text>
            </view>
          </view>
        </view>
        <button class="close-help-btn" @click="showHelpModal = false">
          我知道了
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 步骤配置
      steps: ['基本信息', '资质认证', '设备信息'],
      currentStep: 0,
      
      // 城市数据
      cityList: [
        ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京', '重庆', '西安'],
        ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '石景山区']
      ],
      cityIndex: [0, 0],
      
      // 证书类型
      certTypes: [
        { label: '民航局驾驶员执照', value: 'caac' },
        { label: 'AOPA驾驶员证书', value: 'aopa' },
        { label: 'UTC无人驾驶航空器操作证书', value: 'utc' },
        { label: '其他有效证书', value: 'other' }
      ],
      
      // 持证时长选项
      certYearOptions: [
        { label: '1年以内', value: 'less1' },
        { label: '1-3年', value: '1-3' },
        { label: '3-5年', value: '3-5' },
        { label: '5年以上', value: 'more5' }
      ],
      
      // 设备类型
      deviceTypes: [
        { label: 'DJI Mini系列', value: 'mini' },
        { label: 'DJI Air系列', value: 'air' },
        { label: 'DJI Mavic系列', value: 'mavic' },
        { label: 'DJI Phantom系列', value: 'phantom' },
        { label: 'DJI FPV', value: 'fpv' },
        { label: '其他品牌', value: 'other' }
      ],
      
      // 服务范围选项
      serviceRangeOptions: [
        { label: '10km以内', value: '10' },
        { label: '30km以内', value: '30' },
        { label: '50km以内', value: '50' },
        { label: '100km以内', value: '100' }
      ],
      
      // 服务类型
      serviceTypes: [
        { label: '航拍服务', value: 'aerial' },
        { label: '测绘建模', value: 'mapping' },
        { label: '巡检服务', value: 'inspection' },
        { label: '植保服务', value: 'planting' },
        { label: '设备租赁', value: 'rental' },
        { label: '飞行教学', value: 'teaching' }
      ],
      
      // 表单数据
      formData: {
        // 基本信息
        name: '',
        phone: '',
        city: '',
        idCard: '',
        avatar: '',
        
        // 资质信息
        certType: '',
        certNumber: '',
        certYears: '',
        experience: '',
        certImages: [],
        
        // 设备信息
        devices: [],
        otherDevices: '',
        serviceRange: '',
        services: [],
        deviceImages: []
      },
      
      // 弹窗控制
      showCityPicker: false,
      showHelpModal: false,
      
      // 申请编号
      applyNumber: ''
    };
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      if (this.currentStep > 0) {
        this.prevStep();
      } else {
        uni.navigateBack();
      }
    },
    
    // 返回飞手大厅
    navigateToHall() {
      uni.redirectTo({
        url: '/pages/pilot/hall'
      });
    },
    
    // 返回首页
    navigateToHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    
    // 上一步
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
        this.scrollToTop();
      }
    },
    
    // 下一步/提交
    nextStep() {
      if (!this.validateCurrentStep()) {
        return;
      }
      
      if (this.currentStep < 2) {
        this.currentStep++;
        this.scrollToTop();
      } else {
        // 提交表单
        this.submitForm();
      }
    },
    
    // 验证当前步骤
    validateCurrentStep() {
      if (this.currentStep === 0) {
        // 验证基本信息
        if (!this.formData.name) {
          this.showToast('请输入姓名');
          return false;
        }
        if (!this.formData.phone || !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
          this.showToast('请输入正确的手机号码');
          return false;
        }
        if (!this.formData.city) {
          this.showToast('请选择所在城市');
          return false;
        }
        if (!this.formData.idCard || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.formData.idCard)) {
          this.showToast('请输入正确的身份证号');
          return false;
        }
        if (!this.formData.avatar) {
          this.showToast('请上传头像');
          return false;
        }
        return true;
      } else if (this.currentStep === 1) {
        // 验证资质信息
        if (!this.formData.certType) {
          this.showToast('请选择证书类型');
          return false;
        }
        if (!this.formData.certNumber) {
          this.showToast('请输入证书编号');
          return false;
        }
        if (!this.formData.certYears) {
          this.showToast('请选择持证时长');
          return false;
        }
        if (!this.formData.experience || this.formData.experience.length < 20) {
          this.showToast('请详细描述您的飞行经验，至少20个字符');
          return false;
        }
        if (this.formData.certImages.length === 0) {
          this.showToast('请上传证书照片');
          return false;
        }
        return true;
      } else if (this.currentStep === 2) {
        // 验证设备信息
        if (this.formData.devices.length === 0) {
          this.showToast('请选择您拥有的设备');
          return false;
        }
        if (!this.formData.serviceRange) {
          this.showToast('请选择服务范围');
          return false;
        }
        if (this.formData.services.length === 0) {
          this.showToast('请选择提供的服务类型');
          return false;
        }
        if (this.formData.deviceImages.length === 0) {
          this.showToast('请上传设备照片');
          return false;
        }
        return true;
      }
      return true;
    },
    
    // 提交表单
    submitForm() {
      uni.showLoading({ title: '提交中...' });
      
      // 模拟表单提交
      setTimeout(() => {
        uni.hideLoading();
        // 生成申请编号
        this.applyNumber = 'AP' + new Date().getTime().toString().slice(-8);
        this.currentStep = 3;
      }, 1500);
    },
    
    // 城市选择变化
    onCityChange(e) {
      const val = e.detail.value;
      this.cityIndex = val;
      this.formData.city = `${this.cityList[0][val[0]]} ${this.cityList[1][val[1]]}`;
    },
    
    // 城市列变化
    onCityColumnChange(e) {
      // 实际项目中可以根据第一列选择动态加载第二列数据
    },
    
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData.avatar = res.tempFilePaths[0];
        }
      });
    },
    
    // 删除头像
    removeAvatar() {
      this.formData.avatar = '';
    },
    
    // 选择证书照片
    chooseCertImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData.certImages = res.tempFilePaths;
        }
      });
    },
    
    // 删除证书照片
    removeCertImage(index) {
      this.formData.certImages.splice(index, 1);
    },
    
    // 选择设备照片
    chooseDeviceImages() {
      const maxCount = 3 - this.formData.deviceImages.length;
      if (maxCount <= 0) return;
      
      uni.chooseImage({
        count: maxCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData.deviceImages = this.formData.deviceImages.concat(res.tempFilePaths);
        }
      });
    },
    
    // 删除设备照片
    removeDeviceImage(index) {
      this.formData.deviceImages.splice(index, 1);
    },
    
    // 切换设备选择
    toggleDevice(value) {
      const index = this.formData.devices.indexOf(value);
      if (index > -1) {
        this.formData.devices.splice(index, 1);
      } else {
        this.formData.devices.push(value);
      }
    },
    
    // 切换服务类型选择
    toggleService(value) {
      const index = this.formData.services.indexOf(value);
      if (index > -1) {
        this.formData.services.splice(index, 1);
      } else {
        this.formData.services.push(value);
      }
    },
    
    // 显示帮助
    showHelp() {
      this.showHelpModal = true;
    },
    
    // 滚动到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    
    // 显示提示
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    }
  }
};
</script>

<style scoped>
.pilot-apply-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  color: #fff;
  position: relative;
}

.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scaleY(0.5);
}

.navbar-left, .navbar-right {
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
}

.icon-arrow-left, .icon-help {
  font-size: 36rpx;
}

/* 进度指示器 */
.progress-container {
  background-color: #fff;
  padding: 30rpx 30rpx 20rpx;
  position: relative;
}

.progress-track {
  height: 6rpx;
  background-color: #E5E6EB;
  border-radius: 3rpx;
  position: absolute;
  top: 50rpx;
  left: 80rpx;
  right: 80rpx;
}

.progress-fill {
  height: 6rpx;
  background-color: #367AF6;
  border-radius: 3rpx;
  position: absolute;
  top: 50rpx;
  left: 80rpx;
  transition: width 0.3s ease;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33.333%;
}

.step-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  background-color: #F2F3F5;
  color: #909399;
  font-size: 28rpx;
  font-weight: bold;
  z-index: 2;
}

.progress-step.active .step-icon {
  background-color: #ECF2FF;
  border: 2rpx solid #367AF6;
  color: #367AF6;
}

.progress-step.completed .step-icon {
  background-color: #367AF6;
  color: #fff;
}

.step-text {
  font-size: 24rpx;
  color: #909399;
}

.progress-step.active .step-text,
.progress-step.completed .step-text {
  color: #367AF6;
  font-weight: 500;
}

/* 表单容器 */
.form-container {
  margin: 24rpx;
  border-radius: 16rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.form-steps {
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 600rpx;
}

.form-step {
  width: 100%;
  flex-shrink: 0;
  padding: 30rpx;
  transition: all 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 30rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #F2F3F5;
}

/* 表单字段 */
.form-fields {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.form-field {
  display: flex;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #F2F3F5;
}

.form-field:last-child {
  border-bottom: none;
}

.field-label {
  width: 160rpx;
  font-size: 28rpx;
  color: #1D2129;
  display: flex;
  align-items: center;
}

.field-control {
  flex: 1;
}

/* 输入框样式 */
.text-input {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #1D2129;
  padding: 0 10rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.text-input::placeholder {
  color: #C9CDD4;
}

.textarea-input {
  width: 100%;
  font-size: 28rpx;
  color: #1D2129;
  padding: 15rpx 10rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  min-height: 160rpx;
  box-sizing: border-box;
}

.textarea-input::placeholder {
  color: #C9CDD4;
}

/* 选择框样式 */
.select-input {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #1D2129;
  padding: 0 10rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.select-arrow {
  color: #C9CDD4;
  font-size: 24rpx;
}

.placeholder {
  color: #C9CDD4;
}

/* 单选框样式 */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding-top: 5rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  cursor: pointer;
  margin-bottom: 10rpx;
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 2rpx solid #C9CDD4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-item.checked .radio-circle {
  border-color: #367AF6;
}

.radio-item.checked .radio-circle::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #367AF6;
}

.radio-text {
  font-size: 28rpx;
  color: #1D2129;
}

/* 复选框样式 */
.checkbox-group {
  padding-top: 5rpx;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  width: 48%;
  margin-bottom: 10rpx;
  cursor: pointer;
}

.checkbox-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 6rpx;
  border: 2rpx solid #C9CDD4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 20rpx;
  font-weight: bold;
}

.checkbox-item.checked .checkbox-icon {
  background-color: #367AF6;
  border-color: #367AF6;
  color: #fff;
}

.checkbox-text {
  font-size: 26rpx;
  color: #1D2129;
}

/* 上传组件样式 */
.upload-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 10rpx;
  align-items: center;
}

.upload-container.multiple {
  align-items: flex-start;
}

.upload-add {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #DDDFE1;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-plus {
  font-size: 40rpx;
  color: #909399;
  margin-bottom: 8rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #909399;
}

.upload-preview {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  position: relative;
  overflow: hidden;
}

.upload-preview image {
  width: 100%;
  height: 100%;
  display: block;
}

.upload-remove {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

/* 表单提示 */
.field-hint {
  font-size: 22rpx;
  color: #86909C;
  margin-top: 8rpx;
  display: block;
}

/* 操作按钮 */
.form-actions {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.action-btn {
  width: 48%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 16rpx;
  border: none;
  font-weight: 500;
}

.prev-btn {
  background-color: #F2F3F5;
  color: #606266;
}

.next-btn {
  background-color: #367AF6;
  color: #fff;
}

/* 成功页面 */
.success-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 20rpx;
  text-align: center;
  min-height: 600rpx;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #E8F7EF;
  color: #00B42A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  margin-bottom: 40rpx;
  animation: bounce 0.6s;
}

.success-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 20rpx;
}

.success-desc {
  font-size: 28rpx;
  color: #367AF6;
  margin-bottom: 20rpx;
  padding: 0 40rpx;
}

.success-info {
  font-size: 26rpx;
  color: #86909C;
  margin-bottom: 60rpx;
  line-height: 1.6;
  padding: 0 40rpx;
}

.success-buttons {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 20rpx;
}

.success-btn {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 16rpx;
  border: none;
  font-weight: 500;
}

.success-btn.primary {
  background-color: #367AF6;
  color: #fff;
}

.success-btn.secondary {
  background-color: #ECF2FF;
  color: #367AF6;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.modal-dialog {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #1D2129;
  border-bottom: 1px solid #F2F3F5;
}

/* 城市选择器 */
.city-picker-content {
  padding: 20rpx 0;
}

.picker-view {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  color: #1D2129;
}

/* 帮助弹窗 */
.help-modal {
  max-height: 90vh;
}

.help-content {
  padding: 30rpx;
}

.help-item {
  margin-bottom: 30rpx;
}

.help-item:last-child {
  margin-bottom: 0;
}

.help-item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 15rpx;
}

.help-item-content {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.help-item-content text {
  font-size: 24rpx;
  color: #4E5969;
  line-height: 1.6;
}

.close-help-btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #367AF6;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin: 20rpx auto 30rpx;
  display: block;
}

/* 动画 */
@keyframes bounce {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
</style>
